<div>
    <ReposType />
    <div class="page-breadcrumb-dark">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <PageBreadcrumb :navs="page_breadcrumb.navs" />
                </div>
            </div>
        </div>
    </div>
    <div class="repo-detail-header d-table w-100 bg-dark">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-2 col-md-3 text-md-left text-center">
                    <img v-if="repo.logo" :src="imageSrc" width="120" height="120" alt="" @error="handleError" />
                    <img v-else src="@/assets/images/none-box.svg" width="120" height="120" />
                </div>
                <div class="col-lg-6 col-md-9 text-md-left text-center">
                    <h3 class="title mb-0 text-white">{{ repo.name }}</h3>
                    <p class="text-muted">
                        <i class="mdi mdi-cloud-download mr-2"></i>{{ repo.pull_count }} 次下载
                        <br />
                        上传于：{{ repo.creation_time | toLocalTime }}，更新于：{{ repo.update_time | toLocalTime }}
                    </p>
                    <div class="text-white">{{ repo.short_description }}</div>
                </div>
                <div class="col-lg-4 col-md-9">
                    <div class="shadow p-4 mt-5 border-radius bg-white">
                        <div class="widget">
                            <div class="text-center text-success">
                                <i class="mdi mdi-shield-check-outline h1 text-success"></i>
                                <div>镜像已通过安全漏洞扫描</div>
                            </div>
                        </div>
                        <div class="widget mt-4">
                            <span class="widget-title">
                                <small class="text-muted">复制以下命令拉取镜像</small>
                                <span class="mdi mdi-content-copy float-right text-muted hover-dark pointer h6"
                                    v-if="repo && artifacts.length && artifacts[0].tags != null"
                                    v-clipboard="'docker pull atomhub.org/' + repo.name + ':' + artifacts[0].tags[artifacts[0].tags.length - 1].name"
                                    style="margin-top: -5px;"
                                ></span>
                            </span>
                            <div class="bg-dark p-4 rounded shadow mt-4 mb-2">
                                <p class="text-muted font-weight-bold mb-0">
                                    <span class="text-success">$&nbsp;</span>
                                    docker pull atomhub.org/{{ repo.name }}<span v-if="artifacts.length && artifacts[0].tags != null">:{{ artifacts[0].tags[artifacts[0].tags.length - 1].name }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="secondary-nav bg-dark mt-0 mb-0">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <b-nav>
                        <b-nav-item :active="nav == 'markdown'" @click="nav = 'markdown'" exact>
                            描述信息
                        </b-nav-item>
                        <b-nav-item :active="nav == 'artifacts'" @click="nav = 'artifacts'" exact>
                            Artifacts
                        </b-nav-item>
                    </b-nav>
                </div>
            </div>
        </div>
    </div>

    <section class="repo-detail-content">
        <div class="container">
            <div class="bg-white p-4 shadow rounded">
                <Description
                    :repo="repo"
                    :loading="loading"
                    :project="project"
                    :getDescription="getDescription"
                    v-if="nav == 'markdown'"
                />
                <Artifacts
                    :repo="repo"
                    :loading="loading"
                    v-if="nav == 'artifacts'"
                />
            </div>
        </div>
    </section>
</div>
